<script setup>
import { useTimeTypeSelect } from '@/composables/useTimeTypeSelect.js'
const { timeList, initTimeList } = useTimeTypeSelect()
const props = defineProps({
  value: Boolean,
  type: Object
})
const emits = defineEmits(['update:type'])

onMounted(() => {
  initTimeList()
})
const modelValue = ref(props.value)
function onSelect(selectOption) {
  modelValue.value = false
  emits('update:type', selectOption)
}
</script>

<template>
  <van-popover v-model="modelValue" placement="bottom-end" trigger="click">
    <template #reference>
      <div class="flex items-center justify-end">
        <span class="c-#54565C font-400 text-14px leading-14px">时间范围</span>
        <img
          class="h-12px w-12px rotate--90 transition duration-300"
          :class="modelValue ? 'active' : ''"
          src="@/assets/img/icon_requestListArrow.svg"
          alt=""
        />
      </div>
    </template>
    <van-list class="w-106px">
      <van-cell
        v-for="item in timeList"
        :key="item.value"
        :title="item.label"
        :title-class="
          props.type.value === item.value
            ? 'c-#26C080 font-600 text-14px flex justify-center'
            : 'text-14px font-400 c-#333333 flex justify-center'
        "
        @click="onSelect(item)"
      />
    </van-list>
  </van-popover>
</template>

<style scoped lang="less">
.active {
  transform: rotate(0deg);
  transform-origin: center;
  transition: all ease 0.3s;
}
</style>
